<template>
    <div>
        <el-dialog
                :visible.sync="dialogVisible"
                width="30%"
                :close="close"
                :before-close="close">

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="单位ID：">
                    <span > {{ form.unitId }} </span>
                </el-form-item>
                <el-form-item label="单位名称">
                    <el-input v-model="form.unit" :readonly="!editFlag" clearable></el-input>
                </el-form-item>
                <el-form-item label="单位数量">
                    <el-input v-model="form.count" :readonly="!editFlag" clearable></el-input>
                </el-form-item>
                <el-form-item label="默认单位">
                    <el-select v-model="form.isDefault" :disabled="!editFlag">
                        <el-option v-for="(item, i) in default__" :key="i" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <div v-if="!editFlag">
                    <el-button type="primary" @click="close">确 定</el-button>
                    <el-button @click="close">关 闭</el-button>
                    <el-button type="warning" @click="toChange">开启修改</el-button>
                </div>
                <div v-else>
                    <el-button type="primary" @click="submitChange">提交修改</el-button>
                    <el-button @click="cancelChange">取消修改</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API from '@/api/api'
export default {
    name: "SockUnitEdit",
    props: ['stockUnit'],
    data() {
        return {
            // 库存单位对话框标志位
            dialogVisible: true,
            // 修改标志位
            editFlag: false,
            //
            form: {},

            //
            default__: [
                {label: '是', value: 1},
                {label: '否', value: 0}
            ]
        }
    },
    mounted() {
      if (this.stockUnit) {
          this.form = JSON.parse(JSON.stringify(this.stockUnit));
      }
    },
    methods: {
        //
        close() {
            this.$emit('close');
        },
        // 开启修改
        toChange() {
            if (this.stockUnit.isDefault === 1) {
                this.$message.closeAll();
                this.$message({
                    type: 'warning',
                    message: '不能修改‘默认种类’',
                    showClose: true,
                })
            } else {
                this.editFlag = true;
            }
        },
        // 取消修改
        cancelChange() {
            this.editFlag = false;
            this.form = JSON.parse(JSON.stringify(this.stockUnit));
        },
        // 提交修改
        submitChange() {
            let url = API.unit.update;
            let param = this.form;
            this.$post(url, param).then( res => {
                let data = res.data;
                if (data.success) {
                    this.$message.success({
                        showClose: true,
                        message: "修改成功!"
                    });
                    this.close();
                } else {
                    this.$message.error({
                        showClose: true,
                        message: data.msg
                    });
                }
            }).catch( err => {
                this.$message.error({
                    showClose: true,
                    message: "请求失败!",
                });
            })
        },
    }
}
</script>

<style scoped>

</style>
